<!DOCTYPE html>
<html>

	<head>
		<title>jQuery WeUI</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

		<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.">

		<link rel="stylesheet" href="../css/weui.css">
		<link rel="stylesheet" href="../css/jquery-weui.css">
		<link rel="stylesheet" href="../css/demos.css">
	</head>

	<body ontouchstart>

		<header class='demos-header'>
			<h1 class="demos-title">jQuery WeUI</h1>
			<p class='demos-sub-title'>轻量强大的UI库，不仅仅是 WeUI</p>
		</header>

		<div class="weui_grids">
			<a href="buttons.html" class="weui_grid js_grid" data-id="button">
				<div class="weui_grid_icon">
					<img src="images/icon_nav_button.png" alt="">
				</div>
				<p class="weui_grid_label">
					Button
				</p>
			</a>
			<a href="form.html" class="weui_grid js_grid" data-id="cell">
				<div class="weui_grid_icon">
					<img src="images/icon_nav_cell.png" alt="">
				</div>
				<p class="weui_grid_label">
					Form
				</p>
			</a>
			<a href="toast.html" class="weui_grid js_grid" data-id="toast">
				<div class="weui_grid_icon">
					<img src="images/icon_nav_toast.png" alt="">
				</div>
				<p class="weui_grid_label">
					Toast
				</p>
			</a>
			<a href="dialog.html" class="weui_grid js_grid" data-id="dialog">
				<div class="weui_grid_icon">
					<img src="images/icon_nav_dialog.png" alt="">
				</div>
				<p class="weui_grid_label">
					Dialog
				</p>
			</a>
			<a href="progress.html" class="weui_grid js_grid" data-id="progress">
				<div class="weui_grid_icon">
					<img src="images/icon_nav_progress.png" alt="">
				</div>
				<p class="weui_grid_label">
					Progress
				</p>
			</a>
			<a href="msg.html" class="weui_grid js_grid" data-id="msg">
				<div class="weui_grid_icon">
					<img src="images/icon_nav_msg.png" alt="">
				</div>
				<p class="weui_grid_label">
					Msg
				</p>
			</a>
			<a href="article.html" class="weui_grid js_grid" data-id="article">
				<div class="weui_grid_icon">
					<img src="images/icon_nav_article.png" alt="">
				</div>
				<p class="weui_grid_label">
					Article
				</p>
			</a>
			<a href="action-sheet.html" class="weui_grid js_grid" data-id="actionsheet">
				<div class="weui_grid_icon">
					<img src="images/icon_nav_actionSheet.png" alt="">
				</div>
				<p class="weui_grid_label">
					ActionSheet
				</p>
			</a>
			<a href="icons.html" class="weui_grid js_grid" data-id="icons">
				<div class="weui_grid_icon">
					<img src="images/icon_nav_icons.png" alt="">
				</div>
				<p class="weui_grid_label">
					Icons
				</p>
			</a>
			<a href="panel.html" class="weui_grid js_grid">
				<div class="weui_grid_icon">
					<img src="images/icon_nav_panel.png" alt="">
				</div>
				<p class="weui_grid_label">
					Panel
				</p>
			</a>
			<a href="tabbar.html" class="weui_grid js_grid">
				<div class="weui_grid_icon">
					<img src="images/icon_nav_tab.png" alt="">
				</div>
				<p class="weui_grid_label">
					Tabbar
				</p>
			</a>
			<a href="searchbar.html" class="weui_grid js_grid">
				<div class="weui_grid_icon">
					<img src="images/icon_nav_search_bar.png" alt="">
				</div>
				<p class="weui_grid_label">
					SearchBar
				</p>
			</a>
		</div>

		<div class="demos-header">
			<h2 class='demos-second-title'>拓展组件</h2>
			<p class='demos-sub-title'>jQuery WeUI 专属组件</p>
		</div>

		<div class="weui_grids">
			<a href="ptr.html" class="weui_grid js_grid">
				<div class="weui_grid_icon">
					<img src="images/icon_nav_ptr.png" alt="">
				</div>
				<p class="weui_grid_label">
					下拉刷新
				</p>
			</a>
			<a href="infinite.html" class="weui_grid js_grid">
				<div class="weui_grid_icon">
					<img src="images/icon_nav_up.png" alt="">
				</div>
				<p class="weui_grid_label">
					滚动加载
				</p>
			</a>
			<a href="cols.html" class="weui_grid js_grid">
				<div class="weui_grid_icon">
					<img src="images/icon_nav_cell.png" alt="">
				</div>
				<p class="weui_grid_label">
					12栏栅格
				</p>
			</a>
			<a href="picker.html" class="weui_grid js_grid">
				<div class="weui_grid_icon">
					<img src="images/icon_nav_picker.png" alt="">
				</div>
				<p class="weui_grid_label">
					Picker
				</p>
			</a>
			<a href="calendar.html" class="weui_grid js_grid">
				<div class="weui_grid_icon">
					<img src="images/icon_nav_calendar.png" alt="">
				</div>
				<p class="weui_grid_label">
					Calendar
				</p>
			</a>
			<a href="city-picker.html" class="weui_grid js_grid">
				<div class="weui_grid_icon">
					<img src="images/icon_nav_city.png" alt="">
				</div>
				<p class="weui_grid_label">
					City Picker
				</p>
			</a>
			<a href="datetime-picker.html" class="weui_grid js_grid">
				<div class="weui_grid_icon">
					<img src="images/icon_nav_datetime.png" alt="">
				</div>
				<p class="weui_grid_label">
					Datetime
				</p>
			</a>
			<a href="swiper.html" class="weui_grid js_grid">
				<div class="weui_grid_icon">
					<img src="images/icon_nav_swiper.png" alt="">
				</div>
				<p class="weui_grid_label">
					Swiper
				</p>
			</a>
			<a href="noti.html" class="weui_grid js_grid">
				<div class="weui_grid_icon">
					<img src="images/icon_nav_noti.png" alt="">
				</div>
				<p class="weui_grid_label">
					Notification
				</p>
			</a>
		</div>
		</div>

		<script src="../js/jquery-2.1.4.js"></script>
		<script src="../js/jquery-weui.js"></script>
	</body>

</html>